
/**
 * 在指定容器内渲染Mermaid图表
 * @param {HTMLElement} contentElement - 包含Mermaid代码块的DOM容器元素
 */
function generateMermaidChart(contentElement) {
	try {
		/**
		 * 查找容器内所有Mermaid代码块
		 */
		const mermaidBlocks = contentElement.querySelectorAll('code.language-mermaid');
		/**
		 * 渲染单个Mermaid图表
		 * @param {HTMLElement} block - Mermaid代码块元素
		 */
		async function chartRendering(block) {
			/**
			 * 获取Mermaid图表定义代码
			 */
			const graphDefinition = removeCodeComments(block.textContent);
			/**
			 * 创建图表容器元素
			 */
			const container = document.createElement('div');
			// 设置容器类名
			container.className = 'mermaid-container';
			/**
			 * 获取代码块的父元素
			 */
			const parent = block.parentElement;
			// 将容器插入到代码块之前
			parent.insertBefore(container, block);
			// 渲染Mermaid图表
			try {
				// 解析Mermaid图表定义代码
				try {
					// 解析Mermaid图表定义代码
					await mermaid.parse(graphDefinition);
				}
				catch (parseError) {
					// 解析失败时抛出包含错误信息的新错误
					throw new Error(`Mermaid语法错误: ${parseError.message}`);
				}
				/**
				 * 生成唯一的图表ID
				 */
				const id = `mermaid-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
				/**
				 * 渲染Mermaid图表，获取SVG内容
				 */
				const { svg } = await mermaid.render(id, graphDefinition);
				/**
				 * 创建DOMParser实例，用于解析SVG字符串
				 */
				const parser = new DOMParser();
				/**
				 * 解析SVG字符串为DOM文档
				 */
				const doc = parser.parseFromString(svg, 'image/svg+xml');
				/**
				 * 获取SVG元素
				 */
				const svgElement = doc.documentElement;
				/**
				 * 获取图表类型
				 */
				const chartType = svgElement.getAttribute('aria-roledescription');
				// 如果是流程图，调整viewBox参数
				if (chartType === 'flowchart') {
					/**
					 * 获取SVG元素的viewBox属性
					 */
					const viewBox = svgElement.getAttribute('viewBox');
					// 检查viewBox属性是否存在
					if (viewBox) {
						/**
						 * 将viewBox值按空格分割并转换为数字数组
						 */
						const values = viewBox.split(/\s+/).map(parseFloat);
						// 检查数组长度和元素是否为有效数字
						if (values.length === 4 && values.every(v => !isNaN(v))) {
							// 调整viewBox的四个值
							values[0] *= 0.45;
							values[1] *= 0.45;
							values[2] *= 1.05;
							values[3] *= 1.05;
							// 更新SVG元素的viewBox属性
							svgElement.setAttribute('viewBox', values.join(' '));
						}
					}
				}
				// 如果是类图，调整viewBox参数
				if (chartType === 'classDiagram') {
					/**
					 * 获取SVG元素的引用的viewBox属性
					 */
					const viewBox = svgElement.getAttribute('viewBox');
					// 检查viewBox属性是否存在
					if (viewBox) {
						/**
						 * 将viewBox值按空格分割并转换为数字数组
						 */
						const values = viewBox.split(/\s+/).map(parseFloat);
						// 检查数组长度和元素是否为有效数字
						if (values.length === 4 && values.every(v => !isNaN(v))) {
							// 调整viewBox的四个值
							values[0] *= 0;
							values[1] *= 0.35;
							values[2] *= 1.05;
							values[3] *= 1.25;
							// 更新SVG元素的viewBox属性
							svgElement.setAttribute('viewBox', values.join(' '));
						}
					}
				}
				/**
				 * 将SVG元素序列化为字符串
				 */
				const modifiedSVG = new XMLSerializer().serializeToString(svgElement);
				// 将处理后的SVG内容插入到容器中，并添加边框样式
				container.innerHTML = `<div style="width: 100%; border: 10px dashed #eee; padding: 0px">${modifiedSVG}</div>`;
				// 移除原始的代码块
				parent.removeChild(block);
			}
			catch (mermaidError) {
				// 捕获异常并显示错误信息
				showSystemMessage(`${mermaidError.name} | ${mermaidError.message} | ${mermaidError.stack}`, "error");
				// 设置容器类名，用于样式化错误显示
				container.className = 'mermaid-error';
				// 在容器中显示渲染失败的错误信息
				container.innerHTML = `<p>${mermaidError.message}</p>`;
				// 随机时间后创建图表重绘的主动思考事件
				setTimeout(() => chartRedrawing('Mermaid渲染失败', mermaidError.message), RandomFloor(450, 550));
			}
		}
		// 如果存在Mermaid代码块且Mermaid库已加载，则遍历渲染每个图表
		if (mermaidBlocks.length > 0 && typeof mermaid !== 'undefined') mermaidBlocks.forEach(chartRendering);
		// 如果存在Mermaid代码块但Mermaid库未加载，输出警告信息
		else if (mermaidBlocks.length > 0) showSystemMessage("Mermaid库未加载，无法渲染图表", "error");
	}
	catch (parseError) {
		// 捕获异常并显示错误信息
		showSystemMessage(`${parseError.name} | ${parseError.message} | ${parseError.stack}`, "error");
	}
};

/**
 * 在指定容器内渲染ECharts图表
 *
 * @param {HTMLElement} contentElement - 包含ECharts代码块的DOM容器元素
 */
function generateEChartsChart(contentElement) {
	try {
		/**
		 * 定位所有ECharts代码块
		 */
		const echartsBlocks = contentElement.querySelectorAll('code.language-echarts');
		// 无代码块时提前退出
		if (echartsBlocks.length === 0) return;
		// 步骤2: 验证ECharts库加载状态
		if (typeof echarts === 'undefined') return showSystemMessage("ECharts库未加载，无法渲染图表", "error");
		/**
		 * 创建图表容器（替换原始代码块）
		 *
		 * @param {HTMLElement} block - 原始代码块
		 */
		function chartRendering(block) {
			/**
			 * 创建图表容器（替换原始代码块）
			 */
			const container = document.createElement('div');
			// 设置容器样式
			container.className = 'echarts-container';
			container.style.cssText = 'width:100%; height:400px;';
			// 替换原始代码块
			block.parentElement.replaceChild(container, block);
			// 创建图表实例
			try {
				/**
				 * 解析JSON内容
				 */
				let config = JSON.parse(removeCodeComments(block.textContent)) || {};
				// 配置完整性修复流程
				if (!config.series) config.series = [{ type: 'line', data: [5, 20, 36, 10, 10, 20] }];
				else if (!Array.isArray(config.series)) config.series = [config.series];
				// 修复 X 轴配置
				if (!config.xAxis) config.xAxis = { type: 'category', data: [] };
				else if (!config.xAxis.data) config.xAxis.data = [];
				// 修复Y轴配置
				if (!config.yAxis) config.yAxis = { type: 'value' };
				// 补充基础布局配置
				if (!config.grid) config.grid = { left: '3%', right: '4%', bottom: '3%', containLabel: true };
				// 添加默认标题
				if (!config.title) config.title = { text: '月华的绘图册', left: 'center', top: 10 };
				// 多系列时自动生成图例
				if (!config.legend && config.series.length > 1) config.legend = { data: config.series.map(s => s.name || '系列'), bottom: 10 };
				// 添加导出工具
				if (!config.toolbox) config.toolbox = { feature: { saveAsImage: {} } };
				/**
				 * 初始化图标容器
				 */
				const chart = echarts.init(container);
				// 渲染图表
				chart.setOption(config);
				// 添加：存储图表实例到DOM元素上
				container._echartsInstance = chart;
				// 绑定响应式调整
				window.addEventListener('resize', () => chart.resize());
				// 添加：强制调整尺寸
				setTimeout(() => chart.resize(), 50);
			}
			catch (error) {
				// 捕获异常并显示错误信息
				showSystemMessage(`${error.name} | ${error.message} | ${error.stack}`, "error");
				// 设置容器类名，用于样式化错误显示
				container.className = 'echarts-error';
				// 在容器中显示渲染失败的错误信息
				container.innerHTML = `<p>${error.message}</p>`;
				// 随机时间后创建图表重绘的主动思考事件
				setTimeout(() => chartRedrawing('ECharts渲染失败', error.message), RandomFloor(450, 550));
			}
		};
		// 遍历处理每个代码块
		echartsBlocks.forEach(chartRendering);
	}
	catch (error) {
		// 捕获异常并显示错误信息
		showSystemMessage(`${error.name} | ${error.message} | ${error.stack}`, "error");
	}
};

/**
 * 生成集合渲染，用于在指定容器内统一渲染多种类型的内容，包括Mermaid图表、ECharts图表和数学公式。
 *
 * @param {HTMLElement} contentElement - 包含需要渲染内容的DOM容器元素
 */
function generateCollectionRendering(contentElement) {
	// 调用函数在指定容器内渲染Mermaid图表
	generateMermaidChart(contentElement);
	// 调用函数在指定容器内渲染ECharts图表
	generateEChartsChart(contentElement);
};

/**
 * 生成指定描述对应的链接的二维码
 *
 * @param {HTMLElement} container - 用于存放二维码的容器元素
 *
 * @param {string} name - 链接的名称
 *
 * @param {function} callback - 回调函数，用于处理链接
 */
async function generateQRCode(container, name, callback) {
	try {
		/**
		 * 从服务器获取链接数据
		 */
		const response = await fetch('/read/links.json');
		/**
		 * 初始化链接变量
		 */
		let url = '';
		// 检查响应是否成功
		if (response.ok) {
			/**
			 * 将响应数据解析为 JSON 格式
			 */
			const data = await response.json();
			/**
			 * 根据描述查找对应的链接
			 */
			const link = data.find(item => item.name === name);
			// 如果找到链接且链接不为空，则使用该链接
			if (link && link.url && link.url.trim() !== '') url = callback(link.url);
		}
		// 若获取链接数据失败，显示错误消息
		else showSystemMessage(`获取 **${name}** 失败`, 'error');
		// 如果最终链接为空，则使用默认链接
		if (url.trim() === '') url = 'https://gitee.com/TayunStarry/Lunar-Astral-Agents';
		// 在指定容器中生成二维码
		new QRCode(container,
			{
				text: url,
				width: 256,
				height: 256,
				colorDark: '#000000',
				colorLight: '#ffffff',
				correctLevel: QRCode.CorrectLevel.H
			}
		);
	}
	catch (error) {
		// 捕获异常并显示错误信息
		showSystemMessage(`${error.name} | ${error.message} | ${error.stack}`, "error");
	}
};